<!-- form表单拼接组件，由slotType类型判断显示类别 -->
<template>
  <el-form
    :model="myForm"
    :rules="formRules"
    ref="myRuleForm"
    :label-position="labelPosition"
    class="my-ruleForm"
  >
    <el-form-item
      v-for="(item, index) in formHeader"
      :key="item.label + index"
      :label="item.label"
      :prop="item.propName"
      :style="{ width: formItemWidth }"
    >
      <template v-if="item.slotType === 'input'">
        <MyElInput
          v-model:inputValue="myForm[item.propName]"
          v-bind="$attrs"
          :inputPlaceholder="item.placeholder"
          :inputWidth="item.width"
          :inputType="item.inputType"
          :maxlength="item.maxlength"
          :showWordLimit="item.showWordLimit"
          :inputDisabled="item.disabled"
          :propName="item.propName"
          @inputChange="inputChange"
        ></MyElInput>
      </template>
      <template v-if="item.slotType === 'select'">
        <MyElSelect
          v-model:selectValue="myForm[item.propName]"
          v-bind="$attrs"
          :selectOption="item.selectOption"
          :selectPlaceholder="item.placeholder"
          :selectWidth="item.width"
          :selectDisabled="item.disabled"
          :propName="item.propName"
          @selectChange="selectChange"
        ></MyElSelect>
      </template>
      <!-- 默认插槽 -->
      <!-- <slot></slot> -->
      <!-- 具名插槽 -->
      <!-- <template #default="scope" v-if="item.type === 'slot'">
        {{ scope }}
        <slot :name="item.slot_name" :scope="scope"></slot>
      </template> -->
    </el-form-item>
    <el-form-item class="footer-btn">
      <el-button type="primary" @click="submitForm(myForm)">保存</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useCounterStore } from '@/stores/counter.js'
import { getCurrentInstance } from 'vue'

const store = useCounterStore()
const internalInstance = getCurrentInstance()
const myRuleForm = ref(null) // 获取当前form的DOM元素
const myForm = ref({}) // 当前form的双向绑定值
const emits = defineEmits(['updateMyForm', 'submitForm', 'resetForm'])
const props = defineProps({
  // form表头数组数据
  formHeader: {
    type: Array,
    default: () => {
      return []
    }
  },
  // form表单规则
  formRules: {
    type: Object,
    default: () => {
      return {}
    }
  },
  // 表单域标签的位置 right/left/top，值为left或者right时，需要设置 label-width
  labelPosition: {
    type: String,
    default: 'top'
  },
  // form子元素宽度
  formItemWidth: {
    type: String,
    default: '50%'
  }
})

/**
 * @desciption 表单新增|更新
 */
const submitForm = form => {
  myRuleForm.value.validate(valid => {
    // console.log(valid, 'valid')
    if (valid) {
      emits('submitForm', form)
    } else {
      ElMessage.error('提交失败')
      return false
    }
  })
}

/**
 * @desciption 编辑赋值--更新form的绑定值
 */
const updateMyForm = data => {
  myForm.value = data
  // 操作数据后更新视图
  internalInstance.ctx.$forceUpdate()
}

/**
 * @desciption 重置--清空表单
 */
const resetForm = () => {
  console.log(myRuleForm.value, 'myRuleForm.value')
  if (myRuleForm.value !== undefined) {
    myRuleForm.value.resetFields()
  }
  myForm.value = {} // 这里重置完了以后，要重新初始化数据，否则会出现输入不上去的问题
  emits('resetForm')
}

/**
 * @desciption 更新输入后input的值给当前的form
 */
function inputChange(obj) {
  myForm.value[obj.propName] = obj.value
}

/**
 * @desciption 更新输入后select的值给当前的form
 */
function selectChange(obj) {
  myForm.value[obj.propName] = obj.value
}

/**
 * @desciption 暴露方法给父组件
 */
defineExpose({
  updateMyForm
})
</script>

<style lang="scss" scoped>
.my-ruleForm {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 12px 0;
  box-sizing: border-box;
}

.footer-btn {
  position: absolute;
  left: 50%;
  bottom: 10%;
}
</style>
